<template>
  <div>
    <router-view></router-view>
    <section>
      <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item name="jobs" icon="home-o">岗位</van-tabbar-item>
        <van-tabbar-item name="company" icon="search">公司</van-tabbar-item>
        <van-tabbar-item name="message" icon="friends-o">消息</van-tabbar-item>
        <van-tabbar-item name="mine" icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>
    </section>
  </div>
</template>

<script>
export default {
  name: "TotalView",
  data: () => {
    return {
      active: "jobs",
    };
  },
  methods: {
    //路由切换事件
    onChange(index) {
      this.$router.push(index);
    },
  },
  watch: {
    $route() {
      if ("jobs,company,message,mine".includes(this.$route.name))
        this.active = this.$route.name;
    },
  },
  created() {
    this.active = this.$route.name;
  },
};
</script>

<style scoped>
</style>